<template>
  <div>
    <div class="type">
      <label for="">操作人</label
      ><input
        @focus="focus"
        @blur="blur"
        class="searchInput"
        type="text"
        placeholder="请输入"
        @input="searchName"
        v-model="type"
      />
      <div @click="flag = !flag" class="pic">
        <img :src="imgurl" alt="" />
      </div>
      <ul v-show="flag === true" class="options">
        <li v-for="item in options" :key="item.adminId" @click="choice(item.adminName)">
          {{ item.adminName }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import imgSrc1 from '@/assets/dropDown.png'
import imgSrc2 from '@/assets/pullUp.png'
export default {
  data () {
    return {
      flag: false,
      options: [{ adminName: '全部', adminId: 'none' }
      ],
      flag2: false,
      type: '全部'
    }
  },
  computed: {
    imgurl () {
      if (this.flag === false) {
        return imgSrc1
      } else {
        return imgSrc2
      }
    }
  },
  watch: {
    type: {
      handler (val) {
        if (val === '全部') {
          val = ''
        }
        this.$emit('people', val)
      }
    }
  },
  mounted () {
    // this.searchName()
  },
  methods: {
    searchName () {
      let name = this.type
      if (this.type === '全部') {
        name = ''
      }
      if (name) {
        this.$store.dispatch('systemManage/searchPerson', { name }).then(res => {
          this.options = res.data
        }).catch(err => {
          this.options = [{ adminName: '全部', adminId: err.code }]
        })
      } else {
        this.options = [{ adminName: '全部', adminId: 'none' }]
      }
    },
    choice (val) {
      // // console.log(val)
      this.type = val
      this.flag = false
    },
    focus () {
      this.flag = true
      if (this.type === '全部') {
        this.type = ''
      }
    },
    blur () {
      setTimeout(() => {
        if (!this.type) {
          this.type = '全部'
        }
        this.flag = false
      }, 200)
    },
    reset () {
      this.type = '全部'
    }
  }
}
</script>

<style lang="scss" scoped>
label {
    margin-right: 12px;
  }
</style>
